<template>
	<view class="feedback">
		<view class="main">
			<view class="textarea">
				<textarea cols="30" v-model="content" placeholder="请输入商品相关描述"></textarea>
				<view class="up-img">
					<view class="ul">
						<view class="li" v-for="(item, index) in img_list" :key="index">
							<image :src="item" mode=""></image>
							<uni-icons type="clear" size="24" class="topright" color="#999" @click="removerimg(index)" />
						</view>
						<view class="li add" @click="findimg()">
							<image src="../../../static/img/up_img.png" mode="" class="uploadimg"></image>
							<view>添加图片</view>
						</view>
					</view>
				</view>
			</view>
	
			  <checkbox-group>
			        <label>
			            <checkbox value="cb" checked="true" color="#bd3c8c"/></label>
						<text @click="agree">同意买家秀协议</text>
			        
			  </checkbox-group>
			<view class="button" @click="save()">提 交</view>
		</view>
	</view>
</template>

<script>

import feedback from '../../../servers/my/feedback.js';
export default {

	data() {
		return {
			content: '',
			orderId:'',
			goodsId:'',
			img_list: [],
			upimg_list: [],
			
			// 上传图片
			img_view_prefix: this.imgCDNUrl,
			on:''
		};
	},
	onLoad(option) {
		this.orderId=option.id;
		this.goodsId=option.goodsId;
	},
	mounted() {
	
			
	},
	methods: {
		save() {
				if (!this.content) {
					uni.showToast({
						title: '请输入商品描述',
						icon: 'none'
					});
					return;
				}
				// console.log(this.upimg_list)
				if (this.upimg_list.length==0) {
					uni.showToast({
						title: '请上传买家秀图片',
						icon: 'none'
					});
					return;
				}
				//TODO 回头替换该的图片上传地址
				//this.upimg_list=[323423432423,56565656,3,11321321321]
				var obj = {  comment: this.content, img: this.upimg_list.join(','),orderId:this.orderId,goodsId:this.goodsId };
				console.log(obj)
				feedback
					.saveshow(obj)
					.then(res => {
						if (res.code == 200) {
							uni.switchTab({
								url:'../interact'
							})
							
						} else {
							uni.showToast({
								title: res.msg,
								icon:'none'
							});
						}
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			
		},
		findimg() {
			var that = this;
			uni.chooseImage({
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					that.img_list = that.img_list.concat(res.tempFilePaths);
					console.log(JSON.stringify(res.tempFilePaths));
					for(var i=0;i<that.img_list.length;i++){
						that.upload(that.img_list[i])
					}
					// uni.uploadFile({
					// 	url: that.upFileUrl, //上传地址
					// 	filePath: that.img_list[0], //上传图片本地地址
					// 	name: 'file',
					// 	formData: {
					// 		user: 'test'
					// 	},
					// 	success: uploadFileRes => {
							
					// 		that.upimg_list.push(JSON.parse(uploadFileRes.data).data); //返回线上图片地址
					// 		// console.log(that.upimg_list,JSON.parse(uploadFileRes.data).data )
					// 	}
					// });
				}
			});
		},
		upload(filePath){
			var that=this;
			uni.uploadFile({
				url: that.upFileUrl, //上传地址
				filePath: filePath, //上传图片本地地址
				name: 'file',
				formData: {
					user: 'test'
				},
				success: uploadFileRes => {
					
					that.upimg_list.push(JSON.parse(uploadFileRes.data).data); //返回线上图片地址
					 console.log(that.upimg_list )
				}
			});
		},
		removerimg(e) {
			this.img_list.splice(e, 1);
		},
		agree(){
			uni.navigateTo({
				url:'../h5?code=BUYER_SHOW_RULE'
			})
		}
	}
};
</script>

<style lang="less" scoped>
.feedback {
	height: 100%;
	background: #fff;
	.main {
		
		padding-bottom: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		checkbox{
			transform: scale(0.8);
		}
	
		.textarea {
			padding: 20rpx 20rpx 0;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 5rpx 0 30rpx rgba(225, 225, 225, 0.93);
			border-radius: 10rpx;
			textarea {
				width: 100%;
				height: 360rpx;
				border: none;
			}
			.ul {
				overflow: hidden;
				.li {
					position: relative;
					float: left;
					width: 189rpx;
					height: 189rpx;
					border: 1rpx dashed #e1e1e1; /*no*/
					text-align: center;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					color: #e1e1e1;
					font-weight: 100;
					margin-right: 20rpx;
					image {
						width: 189rpx;
						height: 189rpx;
					}
					.uploadimg{
						width: 73rpx;
						height: 62rpx;
						margin-bottom: 10rpx;
					}
					
					.topright {
						position: absolute;
						top: 5rpx;
						right: 5rpx;
						line-height: 50rpx;
					}
				}
				.add{
					padding-top: 40rpx;
					height: 150rpx;
				}
			}
		}
		
		.button {
			margin: 50rpx 0 0;
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
}
</style>
